<template>
  <el-dialog title="查看控制记录"
             :visible.sync="dialogForm"
             width="1100px">
    <base-list ref="viewControlRecordForm"
               :condition="condition"
               :datas.sync="recordDta"
               :pageSearch="pageSearch">
      <el-form :inline="true"
               :model="condition"
               class="search-form"
               slot="search"
               label-width="80px">
        <el-row>
          <el-col :span="8"
                  class="search-width4">
            <el-form-item label="操作人">
              <auto-search-person @selectName="v=>condition['search_LIKE_auditMan']=v"
                                  :name="form.auditMan"></auto-search-person>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="操作时间">
              <!-- <el-date-picker v-model="form.search_GTE_operationTime"
                              value-format="yyyy-MM-dd 00:00:00"
                              type="date"
                              @change="onStartTimeChange"
                              :options="startTimeOption"
                              placeholder="选择日期"></el-date-picker>
              <span>~</span>
              <el-date-picker v-model="form.search_LTE_operationTime"
                              value-format="yyyy-MM-dd 23:59:59"
                              type="date"
                              @change="onEndTimeChange"
                              :options="endTimeOption"
                              placeholder="选择日期"></el-date-picker> -->
              <el-date-picker v-model="condition['search_GTE_operationTime']"
                              value-format="yyyy-MM-dd 00:00:00"
                              type="date"
                              @change="onStartTimeChange"
                              :options="startTimeOption"
                              placeholder="选择日期"></el-date-picker>
              <span>~</span>
              <el-date-picker v-model="condition['search_LTE_operationTime']"
                              value-format="yyyy-MM-dd 23:59:59"
                              type="date"
                              @change="onEndTimeChange"
                              :options="endTimeOption"
                              placeholder="选择日期"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-button type="primary"
                       icon="el-icon-search"
                       class="ml-80"
                       @click="loadData">查 询</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-table slot="list"
                :data="recordDta"
                border
                stripe
                show-summary
                :summary-method="getSummaries"
                max-height="550">
        <el-table-column label="序号"
                         type="index"
                         width="50"></el-table-column>
        <el-table-column prop="cargoOwnerName"
                         label="货主单位"
                         width="120"></el-table-column>
        <el-table-column prop="controlCode"
                         label="控制代码"
                         width="120"></el-table-column>
        <el-table-column prop="controlOrgName"
                         label="控制单位"
                         width="200">
        </el-table-column>
        <el-table-column prop="controlType"
                         label="控制类型"
                         width="120">
          <template slot-scope="scope">
            {{ scope.row.controlType | _filterControlType }}
          </template>
        </el-table-column>
        <el-table-column prop="pledgedWeight"
                         label="质押量"
                         width="120"></el-table-column>
        <el-table-column prop="releasedWeight"
                         label="放货量"
                         width="120"></el-table-column>
        <el-table-column prop="operationPeople"
                         label="操作人"
                         width="120"></el-table-column>
        <el-table-column prop="operationTime"
                         label="操作时间"
                         width="150"></el-table-column>
        <el-table-column prop="auditMan"
                         label="审核人"
                         width="120"></el-table-column>
        <el-table-column prop="auditTime"
                         label="审核时间"
                         width="150"></el-table-column>
        <el-table-column prop="remark"
                         label="备注"
                         width="120"></el-table-column>
      </el-table>
    </base-list>
    <div align="center"
         class="dialog-footer">
      <el-button @click="dialogForm = false">返 回</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { controlRecord } from '@/api/things/propertyControl'
import autoSearchPerson from '@/components/autocomplete/autoSearchPerson'

export default {
  name: 'viewControlRecordForm',
  components: { autoSearchPerson },
  data() {
    return {
      form: this.clearForm(),
      condition: {}, //baselist条件
      dialogForm: false,
      recordDta: [],
      pageSearch: controlRecord,
      id: null,
      search_GTE_operationTime: '',
      search_LTE_operationTime: '',
      // startTime: '',
      // endTime: '',
      startTimeOption: {
        disabledDate(date) {
          return date.valueOf() >= Date.now()
        }
      },
      endTimeOption: {
        disabledDate(date) {
          return date.valueOf() >= Date.now()
        }
      }
    }
  },
  mounted() {
    this.onStartTimeChange(this.form.search_GTE_operationTime)
    this.onEndTimeChange(this.form.search_LTE_operationTime)
  },
  methods: {
    clearForm() {
      return {
        // 'search_GTE_operationTime':
        search_LTE_operationTime: '',
        search_GTE_operationTime: ''
      }
    },
    loadData() {
      this.$refs.viewControlRecordForm.loadData()
    },
    getId(id) {
      this.id = id
      this.condition = { id: id }
      //点击查看调整控制，自动加载列表
      this.$nextTick(() => {
        this.loadData()
      })
    },
    //合计
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (
          column.property === 'pledgedWeight' ||
          column.property === 'releasedWeight'
        ) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index]
        } else {
          sums[index] = ''
        }
      })
      return sums
    },
    //     /**
    //                   * 开始时间发生变化时触发,设置结束时间不可选择的日期
    //                   * 结束时间应大于等于开始时间,且小于等于当前时间
    //                   * @param {string} startTime 格式化后的日期
    //                   * @param {string} type 当前的日期类型
    //                   */
    onStartTimeChange(e) {
      console.log(e)
      this.search_GTE_operationTime = e
      this.endTimeOption = {
        disabledDate(date) {
          return (
            date.valueOf() > Date.now() ||
            date.valueOf() < new Date(e).valueOf()
          )
        }
      }
    },
    //                  /**
    //                   * 结束时间发生变化时触发,设置开始时间不可选择的日期
    //                  * 开始时间小于等于结束时间,且小于等于当前时间
    //                   * @param {string} date 格式化后的日期
    //                   * @param {string} type 当前的日期类型
    //                   */
    onEndTimeChange(e) {
      console.log(e)
      this.search_LTE_operationTime = e
      this.startTimeOption = {
        disabledDate(date) {
          return date.valueOf() > new Date(e).valueOf()
        }
      }
    }
  }
}
</script>

